<template>
  <div class="main">
    <div class="box">
      <div class="tittle">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-feiji1"></use></svg
        ><span>房产纪经</span>
      </div>
      <div class="slogan">真诚，我们以城相待诚实守纪开城布公的大文环境</div>
    </div>
    <div>
      <el-card v-for="item in agentList" :key="item.id" class="card-box" @click.native="toList(item.id)">
        <el-row type="flex">
          <div>
            <img v-imgerr="require('../../assets/pepe.jpg')" :src="item.image" alt="" />
            <p>{{ item.name }}</p>
          </div>
          <el-card class="introduce">
            {{ item.desc }}
          </el-card>
        </el-row>
      </el-card>
    </div>

      <br>
      <!-- 底部组件 -->
    <footerList/>
  </div>
</template>

<script>
import { getAgentsList } from '@/api/agents.js'
export default {
  data () {
    return {
      agentList: []
    }
  },
  async created () {
    const res = await getAgentsList({
      _limit: 10,
      _start: 0
    })
    this.agentList = res.data
    // console.log(36, res)
  },
  methods: {
    async toList (id) {
      this.$store.commit('arceList/Save_id1', id)
      // const res = await getAgantById(id)
      // const agent = res.data.properties
      // // console.log(52, agent)
      // this.$store.commit('arceList/Save_name', agent)
      this.$router.push('/arceList')
    }
  }
}
</script>

<style lang="scss" scoped>
  .box{
    height:500px;
    background: url('@/assets/background/122.jpeg');
    background-size:cover;
    .tittle{
      display: flex;
      svg{
          fill:#fff;
          width: 40px;
          height: 40px;
          margin-left: 100px;
           margin-top: 30px;
      }
      span{
        font-size: 30px;
        color: #fff;
        line-height: 30px;
        margin-left: 30px;
        margin-top: 30px;
        vertical-align: auto;
        font-weight: 700;
      }
    }
  }

  .main{
    // height:100vh;
    // width:100vw;
    // background-color: rgba(176, 181, 187);
     background-color: rgba(183, 202, 182);
  .slogan {
    color: #fff;
    margin-left: 50px;
    margin-top: 20px;
    font-size: 20px;
  }
  }

.card-box {
  width: 1200px;
  height: 220px;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
  // justify-content: space-between;
  align-items: center;
  border-bottom-right-radius: 50px;
  border-top-left-radius: 50px;
  img {
    width: 180px;
    height: 150px;
    border-radius: 50%;
  }
  .introduce {
    margin-left: 40px;
    margin-bottom: 10px;
    width: 900px;
    height: 180px;
    background-color: rgba(176, 181, 187);
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
  }
  p {
    text-align: center;
  }
}
</style>
